<template>
  <div class="task-view-chart">
    <iframe :src="url" class="task-chart-iframe" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getTaskDetail } from '@/api/task'
export default {
  data() {
    return {
      url: ''
    }
  },
  computed: {
    ...mapGetters([
      'curTaskInfo'
    ])
  },
  created() {
    this._getTaskDetail()
  },
  methods: {
    // 查询任务详情
    _getTaskDetail() {
      const para = `/${this.curTaskInfo.taskName}`
      getTaskDetail(para).then(res => {
        if (res.message.code === 0) {
          this.url = `http://61.185.199.178:38008/grafana/d/db-task/taskmetrics?orgId=1&refresh=30s&var-taskset_name=${res.data.id}`
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.task-view-chart {
  .task-chart-iframe {
    width: 100%;
    height: 700px;
  }
}
</style>
